<?php
/**
 * 交易日志
 * @author liuzilu <fotomxq@gmail.com>
 * @version 1
 * @package stock
 */
//引用全局
require('glob.php');
//当前所属页面名称
$nowPageName = 'log';
?>

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>交易记录 - <?php echo $webData['WEB-TITLE']; ?></title>
        <link rel="shortcut icon" href="../assets/imgs/logo.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="../assets/imgs/logo.png">
        <link rel="stylesheet" href="../assets/css/uikit.min.css">
        <link rel="stylesheet" href="../assets/css/components/notify.min.css">
        <link rel="stylesheet" href="assets/css/glob.css">
        <link rel="stylesheet" href="assets/css/index.css">
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

        <?php require('page-menu.php'); ?>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>交易记录</h2>
                    <p>买卖交易记录。</p>
                </div>
            </div>
            
            <hr>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>交易次数统计</h2>
                    <canvas id="stockChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <hr>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>历史持仓情况</h2>
                    <table class="uk-table uk-table-hover" id="stock-log-c-table">
                        <thead>
                            <tr>
                                <th>股票名称</th>
                                <th>买入日期</th>
                                <th>平仓日期</th>
                                <th>买入次数</th>
                                <th>卖出次数</th>
                                <th>盈亏</th>
                                <th>实际和目标偏离均值</th>
                                <th>持仓时长</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>航天机电</td>
                                <td>2015-3-1</td>
                                <td>2015-3-29</td>
                                <td>25</td>
                                <td>26</td>
                                <td class="price-up">4020.82 (+4.49%)</td>
                                <td class="price-down">-360 (-0.33)</td>
                                <td>29天</td>
                            </tr>
                        </tbody>
                    </table>
                    <ul class="uk-pagination">
                        <li class="uk-pagination-previous"><a href="#stockLogC-prev">上一页</a></li>
                        <li class="uk-pagination-next"><a href="#stockLogC-next">下一页</a></li>
                    </ul>
                </div>
            </div>
            
            <hr>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>买卖日志</h2>
                    <table class="uk-table uk-table-hover" id="stock-log-j-table">
                        <thead>
                            <tr>
                                <th>股票名称</th>
                                <th>日期</th>
                                <th>操作类型</th>
                                <th>价格</th>
                                <th>数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>航天机电</td>
                                <td>2015-3-1</td>
                                <td>买入</td>
                                <td>22.35</td>
                                <td>2900</td>
                            </tr>
                        </tbody>
                    </table>
                    <ul class="uk-pagination">
                        <li class="uk-pagination-previous"><a href="#stockLogJ-prev">上一页</a></li>
                        <li class="uk-pagination-next"><a href="#stockLogJ-next">下一页</a></li>
                    </ul>
                </div>
            </div>

        </div>

        <script src="../assets/js/jquery.min.js"></script>
        <script src="../assets/js/uikit.min.js"></script>
        <script src="../assets/js/components/notify.min.js"></script>
        <script src="../assets/js/chart.min.js"></script>
        <script>
            $(function () {
                //日统计表设定
                $('#stockChart').width($('#stockChart').parent().width());
                var chartdata = {
                    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                    datasets: [
                        {
                            fillColor: "rgba(220,220,220,0.5)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            data: [65, 59, 22, 56, 55]
                        }
                    ]
                }
                var chartx = $("#stockChart").get(0).getContext("2d");
                var stockhart = new Chart(chartx);
                new Chart(chartx).Line(chartdata, {
                    bezierCurve: false,
                    scaleShowLabels: true,
                    scaleLabel:'<%=value%>次'
                });
            });
        </script>

    </body>
</html>